<template>
  <div>
    <div class="ke__margin ke__bgfff">
      <div class="ke__search">
        <el-row>
          <el-col :span="12">
            <el-input v-model="search.key" size="small" placeholder="输入课程名称" @keyup.enter.native="onEnterSearch">
              <el-button slot="append"
                         size="small"
                         icon="el-icon-search"
                         @click="onEnterSearch">搜索</el-button>
            </el-input>
          </el-col>

          <el-col :span="12" style="text-align: right">
            <el-button type="primary"
                       icon="el-icon-plus"
                       size="small"
                       @click="$ke_router.push({ name: 'CertEdit', query: { id: '0' } })">
              添加课程
            </el-button>
          </el-col>
        </el-row>
      </div>

      <div class="ke__margin">
        <el-table :data="list" v-loading="loading">

          <el-table-column prop="name" label="课程名称" width="300px"/>

          <el-table-column prop="area_name" label="城市"/>

          <el-table-column prop="school_name" label="学校"/>

          <el-table-column label="报名费用" align="center">
            <template slot-scope="{ row }">
              ¥{{ row.money }}
            </template>
          </el-table-column>

          <el-table-column prop="number" label="满员人数" align="center"/>

          <el-table-column prop="create_time" label="创建时间" width="180"/>

          <el-table-column label="操作" width="260" align="center">
            <template slot-scope="{ row }">
              <el-button size="small" type="info"
                         icon="el-icon-edit"
                         @click="$ke_router.push({ name: 'CertEdit', query: { id: row.id } })">编辑</el-button>

              <el-button size="small" type="danger"
                         icon="el-icon-delete" @click="onClickDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="page" :total="total" @current-change="onPageChange"/>
      </div>

    </div>
  </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class CertIndex extends Vue {
  list = []
  total = 0
  page = 1
  limit = 10
  selection = []
  loading = true
  search= {}


  mounted () {
    this.onLoad()
  }

  onEnterSearch () {
    this.page = 1
    this.list = []
    this.onLoad()
  }

  onPageChange (page) {
    this.list = []
    this.page = page
    this.onLoad()
  }

  // 加载列表数据
  onLoad () {
    this.loading = true
    this.$http.get('admin/cert', { page: this.page, limit: this.limit, ...this.search })
      .finally(() => this.loading = false)
      .then(result => {
        this.list = result.list
        this.total = result.total
      })
  }

  // 删除
  onClickDelete (row) {
    this.$confirm('确定要删除这篇信息吗？')
      .then(() => {
        const idx = this.list.findIndex(item => item.id === row.id)
        this.list.splice(idx, 1)
        this.$http.delete(`admin/cert/${row.id}`)
          .then((result) => {
            if (result.res_code === 0) {
              this.$message.success('删除成功')
              if (this.list.length <= 3) {
                this.list = []
                this.total = 0
                this.onLoad()
              }
            } else {
              this.onLoad()
            }
          })
      })
  }

}
</script>

<style scoped>

</style>
